<template>
  	<!-- 顶部推荐商品描述 -->
	<el-row :gutter="30" class="tipsBox sa-p-20 sa-m-b-20">
		<el-col :sm="24" :md="24" :lg="16">
			<div class="tipsBox-title">什么是货源推荐？</div>
			<div class="tipsBox-title">货源推荐是鲸喜生活为商家提供的一站式铺货代销平台，聚合海量站内外货源，低成本高效率</div>
			<el-row :gutter="20" class="sa-m-t-16">
				<el-col :xs="24" :sm="8" :md="8">
					<div class="imgTipsBox">
						<sa-image url="/static/icon/image.png" size="50" />
						<div class="imgTipsBox-right">
							<div class="right-title">热销爆品</div>
							<div class="right-tips">行业爆款畅销好货</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="8" :md="8">
					<div class="imgTipsBox">
						<sa-image url="/static/icon/image.png" size="50" />
						<div class="imgTipsBox-right">
							<div class="right-title">热销爆品</div>
							<div class="right-tips">行业爆款畅销好货</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="8" :md="8">
					<div class="imgTipsBox">
						<sa-image url="/static/icon/image.png" size="50" />
						<div class="imgTipsBox-right">
							<div class="right-title">热销爆品</div>
							<div class="right-tips">行业爆款畅销好货</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-col>
		<el-col :sm="24" :md="24" :lg="8">
			<div class="sellerBox">
				<div class="sellerBox-title">商家的声音</div>
				<div class="sellerBox-leaveWord">
					<div class="leaveWord-content">我做梦也没想到在鲸喜能卖出1000单，必须要跟进鲸喜工作人员的步伐，感谢货源平台的运营人员，每周给我推送优质新品货源！</div>
					<div class="leaveWord-from">@马**小店</div>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script setup>
  import {ref , reactive ,watch,watchEffect} from 'vue';


</script>

<style lang="scss" scoped>
.tipsBox{
	background: #F2F5FF;
	.tipsBox-title{
		margin-bottom: 6px;
		font-family: Source Han Sans;
		font-size: 16px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #232222;
	}
	.imgTipsBox{
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		background: #FFFFFF;
		// width: 288px;
		height: 80px;
		.imgTipsBox-right{
			margin-left: 15px;
			.right-title{
				margin-bottom: 4px;
				font-family: Source Han Sans;
				font-size: 16px;
				font-weight: bold;
				line-height: normal;
				letter-spacing: normal;
				color: #494949;
			}
			.right-tips{
				font-family: Source Han Sans;
				font-size: 16px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #9E9E9E;;
			}
		}
	}
	.sellerBox{
		height: 100%;
		display: flex;
		flex-direction: column;
		.sellerBox-title{
			font-family: Source Han Sans;
			font-size: 18px;
			font-weight: bold;
			line-height: normal;
			letter-spacing: normal;
			color: #454343;
		}
		.sellerBox-leaveWord{
			flex: 1;
			margin-top: 12px;
			border-radius: 10px;
			padding: 8px;
			background: #FFFFFF;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.leaveWord-content{
				font-family: Source Han Sans;
				font-size: 16px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #9E9E9E;
			}
			.leaveWord-from{
				text-align: right;
				font-family: Source Han Sans;
				font-size: 16px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #9E9E9E;
			}
		}
	}
}

</style>
